<template>

    <div class="component-echarts" :id="id">
        <div :ref='id' class="component-echarts__content" :style='styleObject'></div>
    </div>

</template>

<script>
    import echarts from 'echarts'
    import theme from'echarts/theme/macarons'

    export default {
        props:{
            height:{
                type: String,
                default: '450px'
            },
            theme:{
                type: String,
                default: ''
            },
            width:{
                type: String,
                default: '400px'
            },
            id:{
                type: String,
                required: true
            },
            options: Object
        },
        data() {
            return {
                chart:{},
                // show:false
            }
        },
        computed:{
            styleObject(){
                return {
                    height:this.height,
                    width:this.width
                }
            }
        },
        methods:{

        },
        created(){

        },
        mounted: function () {
            this.$nextTick(()=>{
                setTimeout(()=>{
                    let width = $(`#${this.id}`).width()
                    $(this.$refs[this.id]).css('width',width+'px')

                    this.chart = echarts.init(this.$refs[this.id],this.theme);
                    this.chart.setOption(this.options)
                },300)
            })
        },
        watch: {
            options: {
              handler (options) {
                  this.chart.setOption(options, true)
              },
              deep: true
            },
        },
    }
</script>

<style lang='scss'>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .component-echarts{
        width: 100%;
    }

</style>


